
<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/login.jpg" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper">
				<input v-model="form.username" class="input" type="text" value="" placeholder="请输入用户名"/>
			</view>
			<view class="inputWrapper">
				<input v-model="form.password" class="input" type="password" value="" placeholder="请输入密码"/>
			</view>
			<view class="loginBtn">
				<text type="button" class="btnValue" :loading="isLoading" @click="login()">登录</text>
			</view>
			<view class="forgotBtn">
				<text>找回密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imageURL:'../../static/login.jpg',
				form: {							// 表单数据
						username: '',
						password: ''//实现数据双向绑定
				},
				isLoading: false  //是否加载中
			}
		},
		onLoad() {

		},
		methods: {
			login(){
				//const _this = this		// 获取此时的this为一个常量，防止下面请求回调改变出错
				this.isLoading = true;	// 使登录按钮变为加载中
				console.log(this.form)
				uni.request({
					url: this.$baseUrl+'login',	// 路径
					method:'POST',		// 请求方法
					data: this.form,	// 发送的数据
					success:res=>{
						console.log(res)
						console.log(res.data.code)
						console.log(res.data)
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						uni.switchTab({								// 跳转到新闻页面
							url: '../personal/personal'
						})
					}
				})
			}
		}
	}
</script>

<style>

	.content {
		/* background: #377EB4; */
		background: #8eb981;
		/* background: url(../../static/login.jpg) no-repeat ; */
		width: 100vw;
		height: 100vh;
	}
	.avatorWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>

